<template>
    
  <div class="box">
<div class="top">
    <van-search
  v-model="value"
  show-action
  label="地址"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</van-search>
</div>
<div class="center">
    <van-swipe :autoplay="1000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="width: 100%;height: 500px;"/>
  </van-swipe-item>
</van-swipe>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
</div>
</div>

</template>
<script>
export default {
  setup() {
    const images = [
        
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      '	https://img1.360buyimg.com/n2/jfs/t1/199330/14/46102/73826/6710e031F8a845d6c/81cc7646f62c943b.jpg',
    '	https://img1.360buyimg.com/n6/jfs/t1/124431/8/47213/33684/6710af55Fad6c06ea/613f8a970b6d0355.png',
    '	https://img1.360buyimg.com/n6/jfs/t1/69583/24/29215/79921/66c7e67cF3271bc5a/9db229fa1cf410d4.jpg',
    ];
    return { images };
  },
};
</script>
<style>
*{
    margin: 0;
    padding: 0;
   
}
html,body,#app,.box{
    width: 100%;
    height: 100%;

}
.images{
    width: 100%;
    height: 500px;
}
</style>